<template>

	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-main" :isBack="true">
			<block slot="content">预约记录</block>
		</cu-custom>
		<view>
			<view class="fixed w-100" :style="{zIndex: 999}">
				<view :style="{height: StatusBar+'px'}" class="cu-bar bg-white search">
					<view class="search-form round">
						<text class="cuIcon-search"></text>
						<input type="text" v-model="searchObj.key" placeholder="输入搜索的关键词" confirm-type="search"></input>
					</view>
					<view class="action">
						<button class="cu-btn bg-main  round" @tap="search">搜索</button>
					</view>
				</view>
				<view class="bg-white flex justify-start align-center padding-lr-sm" :style="{height: StatusBar*1+'px'}">
					<text :class="searchObj.stu == '' ? 'text-main' : 'text-gray'"
						@tap="tapStatu('')"
						class="margin-lr-sm">全部</text>
					<text :class="searchObj.stu == item.code ? 'text-main' : 'text-gray'" 
						class="margin-lr-sm"
						@tap="tapStatu(item.code)"
						v-for="(item, index) in status" :key="index">{{item.value}}</text>
				</view>
			</view>
			<view :style="{paddingTop: StatusBar*2+'px'}">
				<view class="margin-sm margin-bottom-xs shadow radius bg-white overflow-hidden" v-for="(item,index) in yyjlitems"
					:key="index">
					<view class="">
						<view 
							:class="item.statu == 'C' ? 'bg-red' : (item.statu == 'R' ? 'bg-blue' : (item.statu == 'U' ? 'bg-yellow' : 'bg-gray'))"
							class="padding-sm flex justify-between align-center">
							<text>{{item.yyjlitemid}}</text>
							<text @tap="toYYjlitemInfo(item.yyjlitemid)" class="">详细<text class="cuIcon-right"></text></text>
						</view>
						<view class="padding-sm flex justify-between align-center">
							<text>{{item.rq}}</text>
							<text>{{item.st}} - {{item.et}}</text>
						</view>
						<view class="padding-sm flex justify-between align-center">
							<text
								:class="item.statu == 'C' ? 'text-red' : (item.statu == 'R' ? 'text-blue' : (item.statu == 'U' ? 'text-yellow' : 'text-gray'))"
								>{{yystu[item.statu]}}</text>
							<text>
								<text class="text-red">实付金额：￥{{item.sfje}}</text>
								<text class="margin-lr-sm">/</text>
								<text class="text-gray">金额：￥{{item.je}}</text>
							</text>
						</view>
						<view class="padding-sm text-left">{{item.mdmc}}</view>
						<view 
							:class="item.statu == 'R' ? 'justify-between' : ''"
							class="padding-sm flex align-center">
							<text>{{item.fjmc}}</text>
							<text v-if="item.statu == 'R'" @tap="tuQcode(item.yyjlitemid)">点击进门</text>
							
						</view>
					</view>
				</view>
			</view>

			<!-- 显示更多按钮 -->
			<view class="padding" v-if="yyjlitems.length < pageInfo.total">
				<button @click="loadMore" class="cu-btn block bg-main lg">显示更多</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				searchObj: {
					key: "",
					stu: "",
				},
				status: [],
				yystu: {},
				pageInfo: {
					current: 1,
					size: 16,
					total: 0
				},
				yyjlitems: []

			};
		},

		computed: {
			currentPosition: function() {
				if (this.store.state.position) {
					return this.store.state.position;
				}
				return undefined;
			}
		},

		onLoad: function(option) {
			if (option.stu) {
				this.searchObj.stu = option.stu;
			}
			this.constant.get("YYSTU").then(data => {
				this.yystu = data.YYSTU;
				this.status = data.dicts;
			});
			this.search();
		},
		onShareAppMessage: function() {
			return {
				title: this.store.state.title,
				path: '/pages/first?id=' + this.store.state.client.clientid
			}
		},
		methods: {
			tuQcode: function(id) {
				uni.navigateTo({
					url: `/pages/cyy/yy/qcode?yyjlitemid=${id}`
				})
			},
			tapStatu: function(stu) {
				this.searchObj.stu = stu;
				this.search();
			},
			search: function() {
				this.yyjlitems = [];
				this.pageInfo.current = 1;
				this.loadYYjlitem();
			},
			loadMore: function() {
				this.pageInfo.current++;
				this.loadYYjlitem();
			},
			loadYYjlitem: function() {
				let param = {
					current: this.pageInfo.current,
					size: this.pageInfo.size,
					key: this.searchObj.key,
					statu: this.searchObj.stu,
					flg: true
				};

				this.api("/yy/item/page/get").send(param).then(data => {
					this.pageInfo.current = data.yyjlitems.current;
					this.pageInfo.total = data.yyjlitems.total;
					this.pageInfo.size = data.yyjlitems.size;
					for (let index in data.yyjlitems.records) {
						let record = data.yyjlitems.records[index];
						this.yyjlitems.push(record);
					}
				});

			},


			// 卡片点击处理
			toYYjlitemInfo: function(id) {
				uni.navigateTo({
					url: `/pages/cyy/yy/detail?yyjlitemid=${id}`
				})
			}

		},


	}
</script>

<style>

</style>